<template>
  <div class="container">
    <h2 class="p-t-40">微头条推荐（点击量/推荐量）</h2>
    <el-row>
      <el-col class="top-search">
        <label for>A组</label>
        <el-select
          v-model="listQuery1.combineStrategyName1"
          class="w-400"
          size="small"
          @change="getRecommendOption(1, 2, listQuery1.combineStrategyName1)"
        >
          <el-option
            v-for="item in vlogRecommaned1.combineStrategy"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="listQuery1.sortStrategyName1"
          class="w-400"
          size="small"
          @change="getRecommendOption(1, 3, listQuery1.combineStrategyName1, listQuery1.sortStrategyName1)"
        >
          <el-option
            v-for="item in vlogRecommaned1.sortStrategyName"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="listQuery1.recallStrategyName1" class="w-400" size="small">
          <el-option
            v-for="item in vlogRecommaned1.recallStrategyName"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col class="top-search">
        <label for>B组</label>
        <el-select
          v-model="listQuery1.combineStrategyName2"
          class="w-400"
          size="small"
          @change="getRecommendOption(2, 2, listQuery1.combineStrategyName2)"
        >
          <el-option
            v-for="item in vlogRecommaned2.combineStrategy"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="listQuery1.sortStrategyName2"
          class="w-400"
          size="small"
          @change="getRecommendOption(2, 3, listQuery1.combineStrategyName2, listQuery1.sortStrategyName2)"
        >
          <el-option
            v-for="item in vlogRecommaned2.sortStrategyName"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="listQuery1.recallStrategyName2" class="w-400" size="small">
          <el-option
            v-for="item in vlogRecommaned2.recallStrategyName"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col class="top-search">
        <label for>语言</label>
        <el-select v-model="listQuery1.lang" class="w-180" size="small">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-date-picker
          v-model="datePicker1"
          :picker-options="pickerOptions"
          class="w-240"
          size="small"
          type="daterange"
          align="right"
          value-format="yyyy-MM-dd"
        />
        <el-button size="small" type="primary" @click="search1">搜索</el-button>
      </el-col>
    </el-row>
    <el-row class="p-t-15">
      <el-col>
        <el-tabs ref="tabs" v-model="activeName1" type="card">
          <el-tab-pane label="点击量/推荐量" name="first">
            <el-card class="box-card">
              <div class="text item">
                <div id="first" :style="{width: '100%', height: '500px'}"/>
              </div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="点击量" name="two">
            <el-card class="box-card">
              <div class="text item">
                <div id="two" :style="{width: echartWidth, height: '500px'}"/>
              </div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="推荐量" name="three">
            <el-card class="box-card">
              <div class="text item">
                <div id="three" :style="{width: echartWidth, height: '500px'}"/>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts';
import timeUtils from '@/utils/timeHandle.js';
import { dateShortcutKeyJS } from '@/mixins/index.js';
import {
  newsFeedClickPushApi,
  newsFeedRecommendClickApi,
  newsFeedRecommendPushApi,
  getRecommendLevelOneApi,
  getRecommendlevelTwoApi,
  getRecommendlevelThreeApi
} from '@/api/recommended-analysis.js';
export default {
  mixins: [dateShortcutKeyJS],
  data() {
    return {
      datePicker1: [
        timeUtils.timeHandle(
          new Date().getTime() - 3600 * 1000 * 24 * 7,
          'date'
        ),
        timeUtils.timeHandle(
          new Date().getTime() - 3600 * 1000 * 24 * 1,
          'date'
        )
      ],
      activeName1: 'first',
      options3: [
        {
          value: null,
          label: '全部'
        },
        {
          value: 1,
          label: '中文'
        },
        {
          value: 2,
          label: '英/柬'
        }
      ],
      listQuery1: {
        lang: null,
        beginTime: null,
        endTime: null,
        combineStrategyName1: null,
        sortStrategyName1: null,
        recallStrategyName1: null,
        combineStrategyName2: null,
        sortStrategyName2: null,
        recallStrategyName2: null
      },

      isFirstRender1: true,
      echartWidth: null,
      listRatio: {}, // 点击/推荐
      listClick: {}, // 点击
      listRecommon: {}, // 推荐
      readRatio: {},
      readClick: {},
      readRecommoned: {},
      xData1: [],
      vlogRecommaned1: {
        // 小视频推荐策略
        combineStrategy: [
          {
            value: null,
            label: '请选择组合推荐'
          }
        ],
        recallStrategyName: [
          {
            value: null,
            label: '请选择召回推荐'
          }
        ],
        sortStrategyName: [
          {
            value: null,
            label: '请选择排序推荐'
          }
        ]
      },
      vlogRecommaned2: {
        // 小视频推荐策略
        combineStrategy: [
          {
            value: null,
            label: '请选择组合推荐'
          }
        ],
        recallStrategyName: [
          {
            value: null,
            label: '请选择召回推荐'
          }
        ],
        sortStrategyName: [
          {
            value: null,
            label: '请选择排序推荐'
          }
        ]
      }
    };
  },
  created() {
    this.getRecommendOption(1, 1);
    this.getRecommendOption(2, 1);
  },
  mounted() {
    this.getWidth();
    this.search1();
  },
  methods: {
    // 获取微头条推荐策略
    getRecommendOption(group, level, combineStrategyName, sortStrategyName) {
      if (group === 1) {
        if (level === 1) {
          this.vlogRecommaned1 = {
            combineStrategy: [
              {
                value: null,
                label: '请选择组合推荐'
              }
            ],
            recallStrategyName: [
              {
                value: null,
                label: '请选择召回推荐'
              }
            ],
            sortStrategyName: [
              {
                value: null,
                label: '请选择排序推荐'
              }
            ]
          };
          this.listQuery1.combineStrategyName1 = null;
          this.listQuery1.sortStrategyName1 = null;
          this.listQuery1.recallStrategyName1 = null;

          getRecommendLevelOneApi({ compareType: 1 }).then((res) => {
            if (res.code === 200) {
              if (res.data && res.data.length) {
                const arr = res.data;
                for (let i = 0; i < arr.length; i++) {
                  const obj = {
                    value: arr[i].combineStrategyName,
                    label: arr[i].combineStrategyName
                  };

                  if (
                    JSON.stringify(
                      this.vlogRecommaned1.combineStrategy
                    ).indexOf(JSON.stringify(obj)) == -1
                  ) {
                    this.vlogRecommaned1.combineStrategy.push(obj);
                  }
                }
              }
            }
          });
        } else if (level === 2) {
          this.vlogRecommaned1.sortStrategyName = [
            {
              value: null,
              label: '请选择排序推荐'
            }
          ];
          this.vlogRecommaned1.recallStrategyName = [
            {
              value: null,
              label: '请选择召回推荐'
            }
          ];

          this.listQuery1.sortStrategyName1 = null;
          this.listQuery1.recallStrategyName1 = null;

          if (combineStrategyName == null) return;

          getRecommendlevelTwoApi({ compareType: 1, combineStrategyName }).then(
            (res) => {
              if (res.code === 200) {
                if (res.data && res.data.length) {
                  const arr = res.data;
                  for (let i = 0; i < arr.length; i++) {
                    const obj = {
                      value: arr[i].sortStrategyName,
                      label: arr[i].sortStrategyName
                    };

                    if (
                      JSON.stringify(
                        this.vlogRecommaned1.sortStrategyName
                      ).indexOf(JSON.stringify(obj)) == -1
                    ) {
                      this.vlogRecommaned1.sortStrategyName.push(obj);
                    }
                  }
                }
              }
            }
          );
        } else if (level === 3) {
          this.vlogRecommaned1.recallStrategyName = [
            {
              value: null,
              label: '请选择召回推荐'
            }
          ];

          this.listQuery1.recallStrategyName1 = null;
          if (sortStrategyName == null) return;

          getRecommendlevelThreeApi({
            compareType: 1,
            combineStrategyName,
            sortStrategyName
          }).then((res) => {
            if (res.code === 200) {
              if (res.data && res.data.length) {
                const arr = res.data;
                for (let i = 0; i < arr.length; i++) {
                  const obj = {
                    value: arr[i].recallStrategyName,
                    label: arr[i].recallStrategyName
                  };

                  if (
                    JSON.stringify(
                      this.vlogRecommaned1.recallStrategyName
                    ).indexOf(JSON.stringify(obj)) == -1
                  ) {
                    this.vlogRecommaned1.recallStrategyName.push(obj);
                  }
                }
              }
            }
          });
        }
      }
      if (group === 2) {
        if (level === 1) {
          this.vlogRecommaned2 = {
            // 小视频推荐策略
            combineStrategy: [
              {
                value: null,
                label: '请选择组合推荐'
              }
            ],
            recallStrategyName: [
              {
                value: null,
                label: '请选择召回推荐'
              }
            ],
            sortStrategyName: [
              {
                value: null,
                label: '请选择排序推荐'
              }
            ]
          };
          this.listQuery1.combineStrategyName2 = null;
          this.listQuery1.sortStrategyName2 = null;
          this.listQuery1.recallStrategyName2 = null;
          getRecommendLevelOneApi({ compareType: 1 }).then((res) => {
            if (res.code === 200) {
              if (res.data && res.data.length) {
                const arr = res.data;
                for (let i = 0; i < arr.length; i++) {
                  const obj = {
                    value: arr[i].combineStrategyName,
                    label: arr[i].combineStrategyName
                  };

                  if (
                    JSON.stringify(
                      this.vlogRecommaned2.combineStrategy
                    ).indexOf(JSON.stringify(obj)) == -1
                  ) {
                    this.vlogRecommaned2.combineStrategy.push(obj);
                  }
                }
              }
            }
          });
        } else if (level === 2) {
          this.vlogRecommaned2.sortStrategyName = [
            {
              value: null,
              label: '请选择排序推荐'
            }
          ];
          this.vlogRecommaned2.recallStrategyName = [
            {
              value: null,
              label: '请选择召回推荐'
            }
          ];

          this.listQuery1.sortStrategyName2 = null;
          this.listQuery1.recallStrategyName2 = null;
          if (combineStrategyName == null) return;

          getRecommendlevelTwoApi({ compareType: 1, combineStrategyName }).then(
            (res) => {
              if (res.code === 200) {
                if (res.data && res.data.length) {
                  const arr = res.data;
                  for (let i = 0; i < arr.length; i++) {
                    const obj = {
                      value: arr[i].sortStrategyName,
                      label: arr[i].sortStrategyName
                    };

                    if (
                      JSON.stringify(
                        this.vlogRecommaned2.sortStrategyName
                      ).indexOf(JSON.stringify(obj)) == -1
                    ) {
                      this.vlogRecommaned2.sortStrategyName.push(obj);
                    }
                  }
                }
              }
            }
          );
        } else if (level === 3) {
          this.vlogRecommaned2.recallStrategyName = [
            {
              value: null,
              label: '请选择召回推荐'
            }
          ];

          this.listQuery1.recallStrategyName2 = null;
          if (sortStrategyName == null) return;

          getRecommendlevelThreeApi({
            compareType: 1,
            combineStrategyName,
            sortStrategyName
          }).then((res) => {
            if (res.code === 200) {
              if (res.data && res.data.length) {
                const arr = res.data;
                for (let i = 0; i < arr.length; i++) {
                  const obj = {
                    value: arr[i].recallStrategyName,
                    label: arr[i].recallStrategyName
                  };

                  if (
                    JSON.stringify(
                      this.vlogRecommaned2.recallStrategyName
                    ).indexOf(JSON.stringify(obj)) == -1
                  ) {
                    this.vlogRecommaned2.recallStrategyName.push(obj);
                  }
                }
              }
            }
          });
        }
      }
    },

    // 获取指定时间段的每一天
    getDayAll(begin, end, noZeroFill) {
      // eslint-disable-next-line no-extend-native
      Date.prototype.format = function() {
        var s = '';
        s += this.getFullYear() + '-'; // 获取年份。
        if (noZeroFill) {
          s += this.getMonth() + 1 + '-';
          s += this.getDate();
        } else {
          s +=
            this.getMonth() + 1 > 9
              ? this.getMonth() + 1 + '-'
              : '0' + (this.getMonth() + 1) + '-';
          s += this.getDate() > 9 ? this.getDate() : '0' + this.getDate();
        }
        return s;
      };

      // eslint-disable-next-line no-array-constructor
      var dateAllArr = new Array();
      var ab = begin.split('-');
      var ae = end.split('-');
      var db = new Date();
      db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
      var de = new Date();
      de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
      var unixDb = db.getTime();
      var unixDe = de.getTime();
      for (var k = unixDb; k <= unixDe;) {
        dateAllArr.push(new Date(parseInt(k)).format().toString());
        k = k + 24 * 60 * 60 * 1000;
      }
      return dateAllArr;
    },
    getWidth() {
      this.$nextTick(function() {
        this.echartWidth = this.$refs['tabs'].$el.clientWidth + 'px';
      });
    },
    search1() {
      if (!this.datePicker1) {
        this.$message.warning('请输入搜索时间', true);
        return;
      }
      this.listQuery1.beginTime = this.datePicker1[0];
      this.listQuery1.endTime = this.datePicker1[1];
      this.xData1 = this.getDayAll(
        this.listQuery1.beginTime,
        this.listQuery1.endTime
      );
      this.getData1();
      this.getData2();
      this.getData3();
    },

    getData1() {
      var myChart = echarts.init(document.getElementById('first'));
      myChart.showLoading();
      newsFeedClickPushApi(this.listQuery1)
        .then((res) => {
          if (res.code == 200) {
            const line1Arr = (res.data && res.data['A-line']) || [];
            const line2Arr = (res.data && res.data['B-line']) || [];

            var list = {
              date: [],
              line1: [],
              line2: []
            };

            for (let i = 0; i < line1Arr.length; i++) {
              const item = line1Arr[i];
              const num =
                Number(item['rate']) == 0
                  ? 0
                  : Number(item['rate'] * 100).toFixed(2);
              list.date.push(item.date);
              list.line1.push(num);
            }

            for (let j = 0; j < line2Arr.length; j++) {
              const item = line2Arr[j];
              const num =
                Number(item['rate']) == 0
                  ? 0
                  : Number(item['rate'] * 100).toFixed(2);
              list.line2.push(num);
            }

            this.listRatio = list;
            this.updateEchart1();
          } else {
            myChart.hideLoading();
          }
        })
        .catch((e) => {
          myChart.hideLoading();
        });
    },

    updateEchart1() {
      var myChart = echarts.init(document.getElementById('first'));
      myChart.showLoading();

      const option = {
        color: this.$store.state.app.eChartColor,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['A-line', 'B-line']
        },
        grid: {
          left: 60,
          right: 60
        },
        xAxis: [
          {
            type: 'category',
            data: this.listRatio['date']
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: 'A-line',
            type: 'line',
            data: this.listRatio['line1']
          },

          {
            name: 'B-line',
            type: 'line',
            data: this.listRatio['line2']
          }
        ]
      };

      myChart.setOption(option, true);
      myChart.hideLoading();
    },
    getData2() {
      if (!this.isFirstRender1) {
        var myChart = echarts.init(document.getElementById('two'));
        myChart.showLoading();
      }

      newsFeedRecommendClickApi(this.listQuery1)
        .then((res) => {
          if (res.code == 200) {
            const line1Arr = (res.data && res.data['A-line']) || [];
            const line2Arr = (res.data && res.data['B-line']) || [];

            var list = {
              date: [],
              line1: [],
              line2: []
            };

            for (let i = 0; i < line1Arr.length; i++) {
              const item = line1Arr[i];
              list.date.push(item.date);
              list.line1.push(item.count);
            }

            for (let j = 0; j < line2Arr.length; j++) {
              const item = line2Arr[j];
              list.line2.push(item.count);
            }

            this.listClick = list;

            this.updateEchart2();
          } else {
            myChart.hideLoading();
          }
        })
        .catch((e) => {
          myChart.hideLoading();
        });
    },
    updateEchart2() {
      var myChart = echarts.init(document.getElementById('two'));
      myChart.showLoading();

      const option = {
        color: this.$store.state.app.eChartColor,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['A-line', 'B-line']
        },
        grid: {
          left: 60,
          right: 60
        },
        xAxis: [
          {
            type: 'category',
            data: this.listClick['date']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'A-line',
            type: 'line',
            data: this.listClick['line1']
          },

          {
            name: 'B-line',
            type: 'line',
            data: this.listClick['line2']
          }
        ]
      };

      myChart.setOption(option, true);
      myChart.hideLoading();
      this.isFirstRender1 = false;
    },
    getData3() {
      if (!this.isFirstRender1) {
        var myChart = echarts.init(document.getElementById('three'));
        myChart.showLoading();
      }

      newsFeedRecommendPushApi(this.listQuery1)
        .then((res) => {
          if (res.code == 200) {
            const line1Arr = (res.data && res.data['A-line']) || [];
            const line2Arr = (res.data && res.data['B-line']) || [];

            var list = {
              date: [],
              line1: [],
              line2: []
            };

            for (let i = 0; i < line1Arr.length; i++) {
              const item = line1Arr[i];
              list.date.push(item.date);
              list.line1.push(item.count);
            }

            for (let j = 0; j < line2Arr.length; j++) {
              const item = line2Arr[j];
              list.line2.push(item.count);
            }

            this.listRecommon = list;
            this.updateEchart3();
          } else {
            myChart.hideLoading();
          }
        })
        .catch((e) => {
          myChart.hideLoading();
        });
    },
    updateEchart3() {
      var myChart = echarts.init(document.getElementById('three'));
      myChart.showLoading();

      const option = {
        color: this.$store.state.app.eChartColor,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['A-line', 'B-line']
        },
        grid: {
          left: 60,
          right: 60
        },
        xAxis: [
          {
            type: 'category',
            data: this.listRecommon['date']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'A-line',
            type: 'line',
            data: this.listRecommon['line1']
          },

          {
            name: 'B-line',
            type: 'line',
            data: this.listRecommon['line2']
          }
        ]
      };

      myChart.setOption(option, true);
      myChart.hideLoading();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 15px;
  .top-search {
    margin: 10px 0;
    text-align: right;
    label {
      font-size: 12px;
      font-weight: 400;
      margin-right: 5px;
    }
  }
  .w-180 {
    width: 180px;
  }
  .w-240 {
    width: 240px;
  }
  .w-400 {
    width: 400px;
  }
  .p-t-40 {
    padding-top: 40px;
  }
}
</style>
